<template>
	<view class="search-bar">
		<view class="search-btn"  v-if="isShowBackBtn" @click="onClickBack">
			返回
		</view>
		<view class="input-wrapper">
			<uni-easyinput prefixIcon="search" :placeholder="placeholder" @input="input" confirmType="search"
				@confirm="confirmSearch" trim @clear="clearSearch" />
		</view>
		<!-- <g-button btn_text="搜索" :width="160" :height="60" :borderRadius="16" :fontSize="28" @click="onClickBtn"></g-button> -->
		<view class="search-btn" @click="onClickBtn" v-if="isShowSearchBtn">
			搜索
		</view>
	</view>
</template>






<script lang="ts">
	export default {
		emits: ['update:modelValue', 'confirmSearch', 'clearSearch','onClickBack'],
		props: {
			placeholder: {
				type: String,
				default: '',
			},
			isShowSearchBtn: {
				type: Boolean,
				default: true,
			},
			isShowBackBtn: {
				type: Boolean,
				default: false,
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				val: '',
			}
		},
		methods: {
			input(e : string) {
				this.val = e;
				this.$emit('update:modelValue', e);
			},
			confirmSearch() {
				this.$emit('confirmSearch');
			},
			clearSearch() {
				console.log('clearSearch');
				this.$emit('clearSearch');
			},
			onClickBtn() {
				this.$emit('confirmSearch');
			},
			onClickBack(){
				this.$emit('onClickBack');
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./searchBar.scss";
</style>